<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的借贷</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            padding-left: 20px;
            padding-right: 20px;
            background-color: #F4F6FA;
        }
        .card-header{
            width: 100%;
            height: 50px;
            background-color: #26BABD;
            font-size: 20px;
            padding-top: 10px;
            padding-left: 10px;
        }
        .card-link{
            color: white;
        }
        .modal-body {
            margin-left: 10%;
        }
        span {
            color: #26BABD;
        }
        .modal-content {
            background-color: #F4F6FA;
        }
        .btn {
            background-color: white;
        }
        .btn-upd {
            background-color: #26BABD;
            color: white;
        }

        .modal {
            width: 40%;
            margin-left: 30%;
        }

        select {
            width: 210px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid;
        }
        .modelText {
            width: 210px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="card-header">
        <span class="card-link" data-toggle="collapse">
            我的借贷
        </span>
    </div>
    <template>
        <div class="table">
            <el-table
                    :data="LoanList"
                    style="width: 100%">
                <el-table-column
                        prop="ml_id"
                        label="序号"
                        width="180" class="table-primary">
                </el-table-column>
                <el-table-column label="借贷资金">
                    <template slot-scope="scope">
                        {{scope.row.l_fund+'元'}}
                    </template>
                </el-table-column>
                <el-table-column label="借贷时间">
                    <template slot-scope="scope">
                        {{scope.row.l_time}}
                    </template>
                </el-table-column>
                <el-table-column label="借贷期限">
                    <template slot-scope="scope">
                        {{scope.row.l_deadline+'天'}}
                    </template>
                </el-table-column>
                <el-table-column label="固定年借贷率">
                    <template slot-scope="scope">
                        {{scope.row.l_lendingrate+'%'}}
                    </template>
                </el-table-column>
                <el-table-column label="利息">
                    <template slot-scope="scope">
                        {{scope.row.l_interest+'元'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="as_name"
                        label="申请状态">
                </el-table-column>
                <el-table-column
                        prop="ls_name"
                        label="借贷状态">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.ls_name=='未逾期'" class="btn btn-info" role="button" style="background-color: #26BABD" @click="selectBanks(scope.row.ml_id,scope.row.l_interest+scope.row.l_fund)" data-target="#repayment" data-toggle="modal"><span style="color: white"> ￥ 还款</span></el-button>
                        <el-button v-if="scope.row.ls_name=='无'" class="btn btn-info" role="button" style="background-color: #26BABD" @click="warn(scope.row.ls_name)" ><span style="color: white"> ￥ 还款</span></el-button>
                        <el-button v-if="scope.row.ls_name=='已还清'" class="btn btn-info" role="button" style="background-color: #26BABD" @click="warn(scope.row.ls_name)"><span style="color: white"> ￥ 还款</span></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeLoan"
                    @current-change="handleCurrentLoan">
            </el-pagination>
        </div>
    </template>
    <!--还款展示模态框-->
    <div class="modal fade" id="repayment">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">还款</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!--                 模态框主体 -->
                <div class="modal-body">
                    <form>
                        <table>
                            <tr>
                                <td><span>银行：</span></td>
                                <td colspan="2">
                                    <select name="bank_id" v-model="bank_id">
                                        <option>---请选择支付银行卡---</option>
                                        <option v-for="bank in banks" :value="bank.bank_id">
                                            {{bank.bank.b_name}}  (**** **** **** {{bank.bank_card.substr(15,4)}})
                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td><span>还款金额(元)：</span></td>
                                <td><input type="text" class="modelText" v-model="params.money" readonly ></td>
                            </tr>
                            <tr>
                                <td><span>交易密码：</span></td>
                                <td>
                                    <input type="password" class="modelText" v-model="params.pwd" placeholder="请输入交易密码" @blur="checkPwd()">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" v-on:click="updateMyLoan(params.ml_id,bank_id,currentPage,pageSize,params.money)" class="btn btn-upd">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
     new Vue({
        el: '#app',
        name: 'myLoan',
        data: function(){
            return{
            currentPage: 1, //初始页
            pageSize: 5,    //    每页的数据
            total: 1,
            LoanList: [],
            banks: [],
            bank_id:'',
            params: {
                ml_id: '',
                ls_name:'',
                pwd:'',
                money:''
             }
          }
  },
        methods: {
            cut(path) {
                window.parent.cut(path);
            },
            //点击失效按钮的警告
            warn(name) {
                if(name=='无'){
                    this.$message({
                        showClose: true,
                        message: '当前审核未通过！',
                        type: 'warning'
                    });
                }
                if(name=='已还清'){
                    this.$message({
                        showClose: true,
                        message: '当前借款已还清！',
                        type: 'warning'
                    });
                }

            },
            //核对交易码
            checkPwd(){
                axios.post('/checkDeal_Pwd').then(res => {
                    if (res.data.flag == true) {
                        if(this.params.pwd == res.data.deal_pwd){
                            return true;
                        }else{
                            alert("交易密码错误！");
                            return false;
                        }
                    }
                })
            },
            //查询银行卡
            selectBanks(ml_id,money){
                var yy=this;
                yy.params.money=money;
                yy.params.ml_id = ml_id;
                axios.post('/selectBankByUid').then(res => {
                    if (res.data.flag == true) {
                        yy.banks = res.data.banksinfo;
                    }
                })
            },
            handleSizeLoan(pageSize){
                this.pageSize = pageSize;
                this.showData(this.currentPage,this.pageSize)
            },
            showData(currentPage,pageSize){
                axios.get("/selectMyLoan/"+currentPage+"/"+pageSize).then(res=>{
                    console.log(res);
                    this.LoanList = res.data.list;
                    this.total = res.data.total;
                    console.log(res.data.list);
                })
            },
            handleCurrentLoan(currentPage){
                this.currentPage = currentPage;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize);
            },
            //修改借贷状态以及银行卡余额
            updateMyLoan(ml_id,bank_id,currentPage,pageSize,money) {
                this.currentPage = currentPage;
                this.pageSize = pageSize;
                this.params.ml_id = ml_id;
                this.bank_id=bank_id;
                this.params.money=money;
                if(bank_id==''){
                    this.$message("请选择银行卡！")
                    return false;
                }
                if(this.params.pwd==""){
                    this.$message("请输入交易密码！")
                    return false;
                }
                axios.post('/updateMyLoan',"ml_id="+ml_id+"&bank_id="+bank_id+"&money="+money).then(res => {
                   if (res.data.flag == true) {
                     window.location.href="myLoan.html";
                     return true;
                   }
                })
            }
        },created() {
            this.showData(1, 5)
        }
    });
</script>
</html>